<template>
  <div class="vip_build_container">
    <!-- 按钮区域 -->
    <div class="button_container">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="handleNewBuildBtnClick"
        >新建</el-button
      >
      <el-button
        icon="el-icon-edit-outline"
        size="small"
        @click="handleEditBtnClick"
        >编辑</el-button
      >
      <el-button
        icon="el-icon-delete"
        size="small"
        @click="handleDeleteBtnClick"
        >删除</el-button
      >
    </div>
    <!-- table表格区域 -->
    <div class="table_container_teo">
      <el-table
        height="75vh"
        :data="tableData"
        style="width: 100%"
        :cell-style="{ padding: 0, height: '30px' }"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        highlight-current-row
        @row-dblclick="handleTableRowDbClick"
        @row-click="handleTableRowClick"
      >
        <el-table-column prop="company" label="条码规律(品牌公司)" width="180">
        </el-table-column>
        <el-table-column prop="sizeKindId" label="尺寸种类" width="180">
        </el-table-column>
        <el-table-column prop="reference" label="条码样式"> </el-table-column>
      </el-table>
    </div>
    <!-- 点击新建的时候，弹出的组件 -->
    <ClickNewBuild
      v-if="isShowClickNewBuild"
      :currentTableRowDbObj="currentTableRowDbObj"
      :title="title"
      @closeBarcodeFile="closeBarcodeFile"
      @get_pin_pai_gongsi_data="get_pin_pai_gongsi_data"
    />
  </div>
</template>
<script>
// 接口
import {
  get_pin_pai_gongsi_data_api,
  delete_bar_code_rule_api
} from '../../../request/baseInfo/barcode_file_request.js'
import ClickNewBuild from './ChildComps/ClickNewbuild.vue'
export default {
  data() {
    return {
      tableData: [],
      // 控制点击新建组件的显示和隐藏
      isShowClickNewBuild: false,
      // 父组件表格中的行被选中的时候保存的对象
      currentTableRowDbObj: {},
      //
      title: '新建'
    }
  },
  created() {
    this.get_pin_pai_gongsi_data()
  },

  methods: {
    // 获取条码规律品牌公司
    async get_pin_pai_gongsi_data() {
      const { data: res } = await get_pin_pai_gongsi_data_api()
      console.log(res, '获取条码规律品牌公司')
      this.tableData = res.data
    },
    closeBarcodeFile() {
      this.isShowClickNewBuild = false
    },
    handleNewBuildBtnClick() {
      this.title = '新建'
      this.isShowClickNewBuild = true
    },
    handleEditBtnClick() {
      console.log('点击了编辑')
      if (!Object.keys(this.currentTableRowDbObj).length)
        return this.$message.warning('请选中表格中的数据')
      // 有数据
      this.title = '编辑'
      this.isShowClickNewBuild = true
    },
    // 点击删除按钮
    async handleDeleteBtnClick() {
      if (!Object.keys(this.currentTableRowDbObj).length)
        return this.$message.warning('请选择要删除的数据')
      // 提示用户是否要删除
      this.$confirm('确认要删除改数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          //  删除接口
          const { data: res } = await delete_bar_code_rule_api({
            id: this.currentTableRowDbObj.id
          })
          console.log(res, 'delete_bar_code_rule_api')
          if (res.code !== 200) return
          this.$message.success('删除成功')
          // 调用接口更新数据
          this.get_pin_pai_gongsi_data()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 表格的行被双击的时候，触发的函数
    handleTableRowDbClick(row) {
      console.log(row, '末尾为售价 售价隔开符')
      this.currentTableRowDbObj = row
      this.title = '编辑'
      this.isShowClickNewBuild = true
    },
    // 表格的行被单击的时候，触发的函数
    handleTableRowClick(row) {
      this.currentTableRowDbObj = row
    }
  },
  components: {
    ClickNewBuild
  }
}
</script>
<style lang="less" scoped>
// 解决要刷新才能显示的问题
// .table_container_teo {
//   //   height: 65vh;
// }
// 容器
.vip_build_container {
  background-color: #fff;
  padding: 20px;
  min-width: 1200px;
  // 新增
  height: 100%;
  width: 100%;
  //所有下拉框容器
  .birthday_vip {
    display: flex;
    font-size: 16px;
    margin-bottom: 16px;
    span {
      margin-right: 7px;
    }
    .el-select {
      width: 160px;
      height: 32px;
      /deep/.el-input {
        height: 32px;
        .el-input__inner {
          height: 32px;
        }
        // 解决下拉框高度改变之后，下拉箭头小图标不对齐
        .el-input__icon {
          line-height: unset;
        }
      }
    }
    .vip {
      margin-left: 16px;
    }
  }
  // 中间的线
  .inline {
    width: 100%;
    height: 1px;
    background: #f6f6f6;
  }
  // 按钮的容器
  .button_container {
    margin-bottom: 16px;
    /* 统一按钮的字体大小 */
    .el-button {
      // 按钮里面的字体统一是14px
      font-size: 14px;
    }
  }
}
</style>
